Use shadows to convey elevation 利用陰影表現高度

陰影是設計中的重要工具。它不只是裝飾,更能幫助我們展示介面中不同元素的層次感。

陰影的大小和模糊程度決定了元素看起來離我們有多近:小而淡的陰影讓元素稍微突出,大而深的陰影讓元素看起來離我們更近

元素離我們越近,就越容易引起注意。比如:


按鈕用小陰影,引起適度關注

下拉選單用中等陰影,讓它更容易被看到

彈出視窗用大陰影,立即吸引使用者目光

設計時,建議建立一套固定的陰影樣式:通常只需要5種不同大小的陰影,先定最小和最大的陰影,然後在中間新增3種漸變的陰影大小

Combining shadows with interaction 陰影還能讓介面更生動
當使用者拖動列表專案時,加上陰影能顯示它正被抬起,點選按鈕時,減小陰影能讓按鈕看起來被按下去了

使用陰影時,重點不是陰影本身,而是思考:這個元素需要多突出?然後選擇合適大小的陰影來實現這個效果。